<template>
    <div ref="footer" id="pc-footer" class="xzcs-footer-bottom-sb">
        <div class="con">
            <div class="logo-text">
                <div class="text1">小竹财税：</div>
                <div class="text2">向财税人传播快乐 · 幸福！</div>
                <div class="text2">解决财税人职业生涯中遇到的各类问题</div>
                <div class="text2">让每个财税人都有一个懂你的职业顾问</div>
            </div>
            <div class="mkzn">
                <div class="text1">模块指南：</div>
                <nuxt-link to="/indices/zyzs" class="text2">专业知识</nuxt-link>
                <nuxt-link to="/indices/gzzs" class="text2">工作助手</nuxt-link>
                <nuxt-link to="/indices/xzxy" class="text2">小竹学院</nuxt-link>
                <nuxt-link to="/indices/zyfz" class="text2">职业发展</nuxt-link>
                <nuxt-link to="/indices/csqz" class="text2">财税圈子</nuxt-link>
                <nuxt-link to="/indices/qf" class="text2">工商企服</nuxt-link>
                <nuxt-link to="/vipcenter" class="text2">会员中心</nuxt-link>
            </div>
            <div class="mkzn">
                <div class="text1">服务中心：</div>
                <div class="text2" @click="clickSignShow">签到</div>
                <nuxt-link to="/eventcentre" class="text2">活动中心</nuxt-link>
                <div class="text2" @click="clickMsg">消息</div>
                <nuxt-link to="/download" class="text2">下载</nuxt-link>
            </div>
            <div class="mkzn">
                <div class="text1">关于小竹：</div>
                <nuxt-link to="/about" class="text2">了解小竹：快乐幸福理念介绍</nuxt-link>
                <nuxt-link to="/service/serviceintroduce" class="text2">加入小竹：成为服务商、渠道合作</nuxt-link>
            </div>
            <div class="lxwm">
                <div class="title">联系我们：</div>
                <div class="text">
                    <!-- <div class="phone">15205695320</div> -->
                    <div class="phone">0551-62620153</div>
                    <img
                        src="~/assets/images/wx-kefu-code.png"
                        class="img"
                        alt="客服"
                    />
                </div>
            </div>
        </div>
        <div class="bottom-bottom">
            <a target="_blank" href="https://beian.miit.gov.cn/" rel="nofollow"
                >皖ICP备2021017961号</a
            >
            <a
                target="_blank"
                class="img-a"
                href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34011102003330"
                rel="nofollow"
            >
                <img src="~/assets/images/index/batb.png" alt="" />
                皖公网安备 34011102003330号
            </a>
            Copyright © 2021-2022 安徽小竹信息技术有限公司, All Rights Reserved.
        </div>
    </div>
</template>

<script>
function isElementNotInViewport(el) {
    let rect = el.getBoundingClientRect();
    return (
        rect.top >=
            (window.innerHeight || document.documentElement.clientHeight) ||
        rect.bottom <= 0
    );
}

import { mapMutations } from "vuex";
import { goTop } from "@/assets/utils/utils.js";

export default {
    name: "myFooter",
    props: ["lists"],
    data() {
        return {
            linkList: [
                // {
                //     name: '首页',
                //     link: '/'
                // },
                {
                    name: "问题库",
                    link: "/quizdata",
                },
                {
                    name: "税收法规库",
                    link: "/ssfgk/index/0/1",
                },
                {
                    name: "会计法规库",
                    link: "/kjfgk/index/0/1",
                },
                // {
                //     name: "小竹学院",
                //     link: "/school/kzzt",
                // },
                {
                    name: "小竹资讯",
                    link: "/information/rmzx/1",
                },
                {
                    name: "模板专区",
                    link: "/templates",
                },
                {
                    name: "小竹问答",
                    link: "/cswd",
                },
                {
                    name: "关于我们",
                    link: "/About",
                },
                {
                    name: "用户协议",
                    link: "/UserAgreement",
                },
                {
                    name: "服务商协议",
                    link: "/ServiceAgreement",
                },
                {
                    name: "小竹企服",
                    link: "/service",
                },
            ],
        };
    },
    mounted() {
        this.$nextTick(() => {
            window.addEventListener("scroll", this.handleScroll);
        });
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
        ...mapMutations("common", ["setisFooterShow", "set_signShow"]),
        // 监听滚动，判断该组件是否出现
        handleScroll() {
            if (isElementNotInViewport(this.$refs.footer)) {
                this.setisFooterShow(false);
            } else {
                this.setisFooterShow(true);
            }
        },

        goLink() {
            // if (item.link == null) {
            //     console.log(window.location.href)
            //     return
            // }
            // this.$router.push({ path: item.link })
            goTop(0, true);
        },

        // 展示签到
        async clickSignShow() {
            if (localStorage.getItem("token")) {
                this.set_signShow(true);
            } else {
                this.$message({
                    message: "请登录",
                    type: "warning",
                });
            }
        },

        clickMsg() {
            if (localStorage.getItem("token")) {
                this.$router.push({
                    path: "/mynews/collectask",
                });
            } else {
                this.$message({
                    message: "请登录",
                    type: "warning",
                });
            }
        },
    },
};
</script>

<style lang="scss">
.xzcs-footer-bottom-sb {
    background: #ffffff;
    .con {
        width: 1200px;
        height: 355px;
        margin: 0 auto;
        padding-top: 66px;
        display: flex;
        justify-content: space-between;
        .logo-text {
            > div {
                margin-bottom: 13px;
            }
            .text1 {
                font-weight: 600;
                font-size: 20px;
                color: #333333;
            }
            .text2 {
                font-weight: 400;
                font-size: 18px;
                color: #333333;
            }
        }

        .mkzn {
            > div,
            a {
                cursor: pointer;
                display: block;
            }
            .text1 {
                font-weight: 600;
                font-size: 20px;
                color: #333333;
                margin-bottom: 13px;
            }
            .text2 {
                font-weight: 400;
                font-size: 18px;
                color: #333333;
                margin-bottom: 6px;
            }
        }

        .lxwm {
            display: flex;
            .title {
                font-weight: 600;
                font-size: 20px;
                color: #333333;
                padding-right: 4px;
            }
            .text {
                .phone {
                    font-weight: 500;
                    font-size: 24px;
                    color: #1c87f3;
                    padding-bottom: 8px;
                }
                .img {
                    width: 128px;
                    height: 128px;
                    background: #d8d8d8;
                    margin-top: 23px;
                }
            }
        }
    }

    .bottom-bottom {
        background: #d8d8d8;
        height: 59px;
        font-size: 14px;
        color: #666666;
        line-height: 59px;
        text-align: center;

        a {
            color: #666666;
            text-decoration: none;
            margin: 0 4px;

            &:hover {
                color: #409eff;
                border-bottom: 1px solid #409eff;
            }
        }

        .img-a {
            img {
                width: 20px;
                height: 20px;
                position: relative;
                top: 4px;
                padding: 0;
                margin: 0;
            }
        }
    }
}
</style>